<template>
	<view class="normal-login-container">
		<!-- 原有登录页面内容 -->
		<view class="logo-content align-center justify-center flex">
			<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
			</image>
			<text class="title">九台人民医院移动端登录</text>
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
				:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>
		</view>
		<view class="xieyi text-center">
			<text class="text-grey1">登录即代表同意</text>
			<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
			<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
		</view>

		<!-- 1. 全屏遮罩：需要更新时显示，拦截所有操作 -->
		<view class="update-mask" v-if="showUpdateMask"></view>

		<!-- 2. 更新弹窗：需要更新时显示 -->
		<view class="update-modal" v-if="showUpdateMask">
			<view class="modal-header">发现新版本</view>
			<view class="modal-content">
				<!-- 版本更新内容（可从接口获取） -->
				<!-- <view class="update-desc">• 优化登录体验</view> -->
				<view class="update-desc">• 修复已知bug</view>
				<!-- <view class="update-desc">• 新增XX功能</view> -->
			</view>
			<view class="modal-footer">
				<!-- 强制更新：不提供“取消”按钮，只能更新 -->
				<button class="update-btn" @click="handleDownloadUpdate">立即更新</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Verify from "@/components/verifition/Verify"

	export default {
		name: 'Login',
		components: {
			Verify
		},
		data() {
			return {
				captchaEnabled: false, // 验证码开关 TODO 芋艿：需要抽到配置里
				globalConfig: getApp().globalData.config,
				loginForm: {
					username: "",
					password: "",
					captchaVerification: ""
				},
				// 新增：更新相关状态
				showUpdateMask: true, // 是否显示遮罩和弹窗
				latestVersion: "", // 接口返回的最新版本号（如：1.2.0）
				updateDownloadUrl: "", // 接口返回的更新下载链接
				localVersionName: '', // 版本名称（如 1.0.0）
				localVersionCode: 0   // 版本号（数字，如 100）
			}
		},
		onLoad() {
			// 获取本地版本号 版本号地址根目录config.js中appInfo.version
			//console.log(111,this.globalConfig.appInfo.version)
			// console.log(uni.getSystemInfoSync().platform)
			// 检查是否为 App 环境
			// if (uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios') {
			// 	if (typeof plus !== 'undefined') {
			// 		this.getAppVersion()
			// 	} else {
			// 		this.getAppVersion()
			// 		// 延迟重试（有时 plus 初始化稍慢）
			// 		setTimeout(() => this.getAppVersion(), 500)
			// 	}
			// } else {
			// 	// 非 App 环境，模拟版本号或提示
			// 	this.localVersionName = '1.0.0'
			// 	this.localVersionCode = 100
			// }
			// 页面加载时，立即检测版本更新
			this.checkAppVersion()
		},
		methods: {
			// 隐私协议
			handlePrivacy() {
				let site = this.globalConfig.appInfo.agreements[0]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 用户协议
			handleUserAgrement() {
				let site = this.globalConfig.appInfo.agreements[1]
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			// 登录方法
			async handleLogin(params) {
				if (this.loginForm.username === "") {
					this.$modal.msgError("请输入您的账号")
				} else if (this.loginForm.password === "") {
					this.$modal.msgError("请输入您的密码")
				} else {
			// 显示验证码
			if (this.captchaEnabled) {
				this.$refs.verify.show()
			} else { // 直接登录
				await this.pwdLogin({})
			}
				}
			},
			// 密码登录
			async pwdLogin(captchaParams) {
			this.$modal.loading("登录中，请耐心等待...")
			// 执行登录
			this.loginForm.captchaVerification = captchaParams.captchaVerification
				this.$store.dispatch('Login', this.loginForm).then(() => {
					this.$modal.closeLoading()
					this.loginSuccess()
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index')
				})
			},
			// 新增1：检测APP版本（核心逻辑）
			async checkAppVersion() {
				try {
					// 步骤1：获取APP本地版本号（HBuilder内置API，需在APP环境运行）
					const localVersion = this.globalConfig.appInfo.version//plus.runtime.version // 如：1.1.0
					console.log('本地版本号',localVersion)
					// 步骤2：调用后端接口，获取最新版本信息（替换为你的真实接口）
					this.$store.dispatch('GetLastAppVersion').then(res => {
						console.log('最新版本号',res.versionName)
						// 步骤3：解析接口返回的最新版本和下载链接
						this.latestVersion = res.versionName// 如：1.2.0
						this.updateDownloadUrl = res.downloadUrl// 如：https://xxx.com/app/android/latest.apk
						// console.log(this.compareVersion(localVersion, this.latestVersion))
						// 步骤4：对比版本号，判断是否需要更新（版本号比较逻辑）
						if (this.compareVersion(localVersion, this.latestVersion) < 0) {
							// 本地版本 < 最新版本 → 需要更新，显示遮罩和弹窗
							this.showUpdateMask = true
						} else {
							// 无需更新，隐藏遮罩
							this.showUpdateMask = false
						}
					})
				} catch (error) {
					console.error("版本检测失败：", error)
					// 检测失败时，默认允许登录（可根据需求调整为“强制检测”）
					this.showUpdateMask = false
				}
			},

			// 新增2：版本号比较工具（支持多段版本号，如1.1.0 vs 1.2.0）
			compareVersion(v1, v2) {
				// 分割版本号为数组（如：1.2.0 → [1,2,0]）
				const arr1 = v1.split(".").map(Number)
				const arr2 = v2.split(".").map(Number)
				// 取最长长度对比
				const maxLen = Math.max(arr1.length, arr2.length)

				for (let i = 0; i < maxLen; i++) {
					// 空值补0（如：1.1 → 1.1.0）
					const val1 = arr1[i] || 0
					const val2 = arr2[i] || 0
					if (val1 > val2) return 1 // v1更新
					if (val1 < val2) return -1 // v2更新
				}
				return 0 // 版本一致
			},

			// 新增3：处理更新下载（跳转浏览器或应用市场）
			handleDownloadUpdate() {
				if (!this.updateDownloadUrl) {
					this.$modal.msgError("更新链接无效，请联系管理员")
					return
				}
				// console.log(uni.getSystemInfoSync().platform)
				// HBuilder API：打开外部链接（安卓跳转浏览器下载APK）
				plus.runtime.openURL(this.updateDownloadUrl, (res) => {
					console.error("打开下载链接失败：", res)
					this.$modal.msgError("请手动打开浏览器访问下载链接")
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;
			image {
				border-radius: 4px;
			}
			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;
			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;
				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}
				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}
			}
			.login-btn {
				margin-top: 40px;
				height: 45px;
			}
			.xieyi {
				color: #333;
				margin-top: 20px;
			}
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}
	
	/* 新增：更新遮罩样式（全屏半透明，拦截所有点击） */
	.update-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9998; /* 确保在登录页面之上 */
	}

	/* 新增：更新弹窗样式（居中显示） */
	.update-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 300px;
		background-color: #fff;
		border-radius: 12px;
		z-index: 9999; /* 确保在遮罩之上 */
		overflow: hidden;

		.modal-header {
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			padding: 15px;
			border-bottom: 1px solid #eee;
		}

		.modal-content {
			padding: 20px 15px;
			font-size: 14px;
			color: #666;

			.update-desc {
				margin-bottom: 8px;
				line-height: 1.5;
			}
		}

		.modal-footer {
			padding: 10px 15px 15px;

			.update-btn {
				width: 100%;
				height: 45px;
				background-color: #1E88E5;
				color: #fff;
				border-radius: 8px;
				font-size: 16px;
			}
		}
	}
</style>
